<template>
  <div class="tabCenter">
    <lock-search @search="searchAction"></lock-search>
    <a-table
      :rowKey="record => record.houseId"
      :dataSource="lockDataList"
      :columns="columns"
      :loading="lockLoading"
      :pagination="{showSizeChanger:true, showQuickJumper:true, current:lockParams['page'], total:lockTotal, pageSize:lockParams['pagesize']}"
      @change="handleTableChange">
      <template slot="znszt" slot-scope="text,record">
        <div>
          <span :class="colorMsg(record.znszt)">{{ record.znszt|filterStatus(1) }}</span>
        </div>
      </template>
      <template slot="xhqd" slot-scope="text,record">
        <div>
          <span :class="colorMsg(record.xhqd)">--</span>
          <!-- <span :class="colorMsg(record.znszt)">{{ record.znszt|filterStatus(2) }}</span> -->
        </div>
      </template>
      <template slot="sydl" slot-scope="text,record">
        <div>
          <span :class="colorMsg(record.sydl)">--</span>
          <!-- <span :class="colorMsg(record.znszt)">{{ record.znszt|filterStatus(3) }}</span> -->
        </div>
      </template>
      <!--暂时隐藏 -->
      <!-- <template slot="action" slot-scope="text, record">
        <a href="javascript:;">密码管理</a>&emsp;<span style="color:#dcdcdc;">|</span>&emsp;<router-link :to="{ name: 'LockHistory',params: {fh:record.fh} }">开门记录</router-link>
      </template> -->
    </a-table>
  </div>
</template>
<script>
import LockSearch from './LockSearch'
import { mapActions, mapGetters, mapMutations } from 'vuex'
const columns = [{
  title: '房号',
  dataIndex: 'fh'
}, {
  title: '门锁编号',
  dataIndex: 'znsbh'
}, {
  title: '门锁状态',
  dataIndex: 'znszt',
  scopedSlots: { customRender: 'znszt' }
}, {
  title: '信号强度',
  dataIndex: 'xhqd',
  scopedSlots: { customRender: 'xhqd' }
},
{
  title: '剩余电量',
  dataIndex: 'sydl',
  width: '200px', // 后期开放操作时去掉
  scopedSlots: { customRender: 'sydl' }
}
// 暂时隐藏
// {
//   title: '操作',
//   width: '200px',
//   dataIndex: 'action',
//   scopedSlots: { customRender: 'action' }
// }
]
export default {
  name: 'LockContent',
  components: {
    LockSearch
  },
  data () {
    return {
      columns
    }
  },
  computed: {
    ...mapGetters([
      'lockDataList',
      'lockParams',
      'lockLoading',
      'lockTotal',
      'userInfo',
      'STORE_ID',
      'OPERATOR_TYPE'
    ])
  },

  created () {
    this.filterParams(true)
    this.searchAjax()
  },
  filters: {
    filterStatus (value1, value2) {
      var text = ''
      if (value2 === 1) {
        switch (value1) {
          case 1:
            text = '正常'
            break
          case 2:
            text = '异常'
            break
        }
      } else if (value2 === 2) {
        switch (value1) {
          case '1':
            text = '--'
            break
          case '2':
            text = '--'
            break
          case '3':
            text = '--'
            break
        }
      } else if (value1 === 3) {
        text = '--'
      }
      return text
    }
  },
  methods: {
    ...mapActions([
      'getLockLists'
    ]),
    ...mapMutations([
      'setLockParams'
    ]),
    // 分页触发函数
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...pagination }
      const params = {}
      params.page = pager.current
      params.pagesize = pager.pageSize
      this.setLockParams(params)
      this.searchAjax()
    },
    // 搜素请求函数
    searchAjax () {
      this.getLockLists(this.lockParams).then(res => {}).catch(() => {
        console.log('request.js统一处理错误')
      })
    },
    // 状态color切换
    colorMsg (value1) {
      let styles = ''
      switch (value1) {
        case 1:
          styles = 'green'
          break
        case 2:
          styles = 'red'
          break
        case 3:
          styles = 'orange'
          break
      }
      return styles
    },
    // 点击搜素按钮
    searchAction () {
      this.searchAjax()
    },
    /* 菜单状态，参数过滤
    *@param {Boolean} true 代表初始化分页表单值
    **/
    filterParams (init) {
      const params = {}
      params.hoperatorId = this.userInfo.id
      params.storesId = this.STORE_ID
      params.jylx = this.OPERATOR_TYPE
      if (init) {
        params.fh = ''
        params.page = 1
        params.pagesize = 10
      }
      this.setLockParams(params)
    }
  }
}
</script>
<style scoped >
.tabCenter{margin-left: 200px;background-color:#fff;}
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
.red{color:#F17171;}
.green{color:#4ABFA8;}
.orange{color:#F6AE35;}
.ant-table-thead > tr > th{color:#999;background:#FAFAFA}
.ant-table-pagination.ant-pagination{padding-right:10px;}
</style>
